import "./../css/style.css";
import "./../images/reba7.jpg";
import "./../images/reba8.jpg";
import "./../images/reba9.jpg";
var $ = function(obj){
    return document.querySelector(obj);
};
var App = function(){
   
}();
window.onload=function(){
    var lis = document.querySelectorAll(".left-main-box li");    
    for(var i =0;i<lis.length;i++){
        lis[i].addEventListener("click",function(){
            for(var i=0;i<lis.length;i++) lis[i].className="";
            this.className = "pic-tab";
            var _src=  this.querySelector("a img").getAttribute("src");
            $(".left-main-top a span img").setAttribute("src",_src);
            $(".right-main-cont img").setAttribute("src",_src);
        },false);   
    }
    // mouseover
    $("#wrap-inner").addEventListener("mouseenter",function(){
        $(".wrap").style.display = "block";  
        $(".right-main-cont").style.display = "block";  
        $("#wrap-inner").addEventListener("mousemove",function(e){
            var e = e || window.event;
            var mouseX = e.clientX - $(".wrap").offsetWidth / 2;
            var mouseY = e.clientY -  $(".wrap").offsetHeight / 2;
            var offsetleft = $("#wrap-inner").clientWidth - $(".wrap").offsetWidth + $("#wrap-inner").offsetLeft;
            var offsettop = $("#wrap-inner").clientHeight - $(".wrap").offsetHeight + $("#wrap-inner").offsetTop;
            console.log($("#wrap-inner").offsetLeft);
            $(".wrap").style.left = mouseX +"px";
            $(".wrap").style.top = mouseY +"px";
            $(".wrap").style.width = $(".right-main-cont").offsetWidth * $("#wrap-inner").offsetWidth / $(".right-main-cont img").offsetWidth + "px";
            $(".wrap").style.height = $(".right-main-cont").offsetHeight * $("#wrap-inner").offsetHeight / $(".right-main-cont img").offsetHeight + "px";

            if(mouseX < $("#wrap-inner").offsetLeft){
                mouseX = $("#wrap-inner").offsetLeft;
            }else if(mouseX > offsetleft){
                mouseX = offsetleft;
            }
            if(mouseY < $("#wrap-inner").offsetTop){
                mouseY = $("#wrap-inner").offsetTop;
            }else if(mouseY > offsettop){
                mouseY = offsettop;
            }
            $(".wrap").style.left = mouseX + "px";
            $(".wrap").style.top = mouseY + "px";

            // 放大图
            $(".right-main-cont img").style.left = -mouseX * ($(".right-main-cont img").offsetWidth / $("#wrap-inner").offsetWidth) +"px"
            $(".right-main-cont img").style.top = -mouseY * ($(".right-main-cont img").offsetHeight / $("#wrap-inner").offsetHeight) +"px"
        },false);
    },false);
    $("#wrap-inner").addEventListener("mouseleave",function(){
        $(".wrap").style.display = "none";
        $(".right-main-cont").style.display = "none";
    },false);
}